<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二维码扫描</title>
</head>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/select.css" rel="stylesheet" type="text/css" />
<link href="layui/css/layui.css" rel="stylesheet" type="text/css" />
<link href="css/font/iconfont.css" rel="stylesheet" type="text/css" />
<style>
.code-bg{
    position: relative; 
    height: 200px; width: 200px; 
    margin: 200px 330px;
    text-align: center; 
    background: url(images/qrbox.png) center top no-repeat; 
}
.code-bg img{ 
    position: absolute;
    top:  10px; left: 20px; 
    z-index: 1;
    height: 160px; width: 160px; 
}
.line{ 
    position: absolute; 
    top: 5px; left: -80px; 
    z-index: 2; 
    height: 3px; width: 360px; 
    background: url(images/dapai.png) no-repeat; 
    /*动画效果*/
    animation: myScan 3s infinite alternate; 
    -webkit-animation: myScan 1s infinite alternate; 
}
.qrBtn{position: relative;bottom:220px }
@keyframes  myScan{
    from { top:5px; }
    to { top: 170px; }
}
-webkit-@keyframes  myScan{
    from { top:5px; }
    to { top: 170px; }
}

body {
    font-size: 11px;
    font-family: 'Open Sans', sans-serif;
    color: #4A4A4A ;
    text-align: center; 
}

.box15{
    margin: 40px auto;
    width: 320px;
    min-height: 310px;
    padding: 10px;
    position:relative;
    background: -webkit-gradient(linear, 100% 100%, 50% 10%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
    border: 1px solid #ccc;
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.1);
    -webkit-border-bottom-right-radius: 60px 5px;
    
}

.box15:before{
    content: '';
    width: 98%;
    z-index:-1;
    height: 100%;
    padding: 0 0 1px 0;
    position: absolute;
    bottom:0; right:0;
    background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f9f9f9), color-stop(.1,#fff));
    border: 1px solid #ccc;
    -webkit-box-shadow: 1px 1px 8px rgba(0,0,0, 0.1);
    -webkit-border-bottom-right-radius: 60px 5px;
    -webkit-transform: skew(2deg,2deg)
                        translate(3px,8px)
}
.box15:after{
    content: '';
    width: 98%;
    z-index:-1;
    height: 98%;
    padding: 0 0 1px 0;
    position: absolute;
    bottom:0; right:0;
    background: -webkit-gradient(linear, 0% 20%, 0% 100%, from(#f3f3f3), to(#f6f6f6), color-stop(.1,#fff));
    border: 1px solid #ccc;
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
    -webkit-transform: skew(2deg,2deg)translate(-1px,2px)
}

.box15_ribbon{
    position:absolute;
    top:0; left: 0;
    width: 130px;
    height: 40px;
    background: -webkit-gradient(linear, 555% 20%, 0% 92%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.0)), color-stop(.1,rgba(0, 0, 0, 0.2)));
    border-left: 1px dashed rgba(0, 0, 0, 0.1);
    border-right: 1px dashed rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.2);
    -webkit-transform: rotate(-30deg) skew(0,0) translate(-30px,-20px);
}

.box15 img {
    width: 100%;
    margin-top: 15px;
}

p{ 
    margin-top: 15px;
    text-align: justify;
}

h1{
    font-size: 20px;
    font-weight: bold;
    margin-top: 5px; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
h2{
    font-size: 14px;
    font-weight: bold;
    margin-top: 5px; 
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
a{
    text-decoration: none;
    color: #4A4A4A !important;
}

a:hover{
    text-decoration: underline;
    color: #6B6B6B !important ;
}
.boxContent{width: 100%;height: 50px;border-top:2px dashed rgba(0, 0, 0, 0.1);margin: 10% 0;word-break: break-all; word-wrap:break-word;}
</style>
<body style="background:#edf6fa;">
	<div class="place">
    <span>位置：</span>
    <ul class="placeul">
    <li><a href="index.html">首页</a></li>
    <li><a href="#">二维码识别</a></li>
    </ul>
    </div>
<!-- 隐藏域 -->
<input type="hidden" id="qrPath"/>
<input type="hidden" id="hqrBase"/>
<!-- 返回 -->
<a style="float: left;margin:20px 100px" title="返回上一层" onclick="javascript :history.back(-1)"><i class="iconfont icon-fanhui" style="font-size: 30px"></i></a>

<div style="width: 600px;height:850px;float: left;">	
	<img src="images/phone.png" style="width: 350px;height: 700px;margin: 50px 0;float: right;"/>
 	<div class="code-bg">
  	 	 <div class="line" style="border-top: double 1px red;display: none;font-size: 12px"></div>
  	 	 <img  id="qrCode" style="display: none;"></img> 	 	 	 
  	 	   	 	<button type="button" class="layui-btn layui-btn-primary qrBtn" >
			<i class="layui-icon">&#xe67c;</i>扫一扫
		</button>  	 
	</div>

	
</div>	
<div style="float: left;width: 500px;height: 500px;margin:100px 80px;text-align: center">
		<div class="box15">
      		 <h1>扫描结果：</h1>   
    		<div class="boxContent"> 
    			<h2 id="scanText" style="margin: 20% auto"></h2>   
    		</div>
        	<div class="box15_ribbon" style="display: none"></div> 
		</div>
</div>
<script src="layui/layui.js"></script>
<script src="layui/jquery.min.js"></script>
<script type="text/javascript">
  layui.use(['upload','element'],function(){
	  var upload=layui.upload;
	  var element=layui.element;
		//上传二维码
		var uploadInst=upload.render({	
			elem : '.qrBtn',
			exts:'zip|rar|7z|ini|jpg|png|gif',
			url : '/Servicing/user/upload',
			accept:'file',
			before:function(obj){
				//预读本地文件，不支持ie8
				obj.preview(function(index,file,result){
					$('#qrCode').attr('src',result);//图片链接（base64）
					$('#qrCode').css('display',"");
					$('.line').css('display',"");
				})					
			},
			done:function(res){
				//如果上传失败
				if(res.code==500){
					return layer.msg('上传失败，'+res.msg);
				}else{//上传成功
					layer.msg('开始扫描...');
					var path=res.data.src;
					$.ajax({
						url:"/Servicing/qr/scanQrCode",
						data:"path="+path,
						dateType:"json",
						type:"POST",
						async:false,  
						success:function(result){
							var data=result.data;
							if(data.indexOf("http://") != -1 ){
								var surl="<a href="+data+"><h2>"+data+"</h2></a>"
								setTimeout(function(){ 
									$('#scanText').text("");
									$('.boxContent').append(surl);
									$('.line').css('display',"none");
									layer.msg('扫描结束，读取成功！');
									}, 3000); 
							
							}else{
								setTimeout(function(){ 
									$('#scanText').text(data);
									$('.line').css('display',"none");
									layer.msg('扫描结束，读取成功！');
									}, 3000); 
							}
							$('#scanText').text("扫描中，请等待...");
						}

					})
					$("#qrPath").val("/uploadfile/"+res.data.src);
				}					
			}
		});
  })
  
  $(document).ready(function(e) {
	var qid=location.search.substring(5);
	 
	if(qid!=null&&qid!=""){
		var jsonstr={"id":qid};
		$.ajax({
			url:"/Servicing/qr/getQrInfo",
			data:jsonstr,
			dataType:"json",
			type:"POST",
			success:function(result){
				$.each(result,function(key,value){
					$('#qrCode').attr("src","data:image/png;base64,"+value.qrBase);	
					$('.box15_ribbon').css('display',"");
					$('.box15_ribbon').text(value.qrCode);
					$('#qrCode').css('display',"");
					$('.line').css('display',"");
				
					readContent(value.qrBase);
				})
				
			}
		})
	}
});
  function readContent(baseStr){
	var str=baseStr.replace(/\+/g,"%2B");// \为转义+号
		$.ajax({
			url:"/Servicing/qr/readQrCode",
			data:"Basekey="+str,
			dataType:"text",
			type:"POST",
			success:function(result){
				if(result.indexOf("http://") != -1 ){
					var surl="<a href="+result+"><h2>"+result+"</h2></a>"
					setTimeout(function(){ 
						$('#scanText').text("");
						$('.boxContent').append(surl);
						$('.line').css('display',"none");
						layer.msg('扫描结束，读取成功！');
						}, 3000); 
				
				}else{
					setTimeout(function(){ 
						$('#scanText').text(result);
						$('.line').css('display',"none");
						layer.msg('扫描结束，读取成功！');
						}, 3000); 
				}
				 layer.msg('开始扫描...');
				$('#scanText').text("扫描中，请等待...");

				
			}
  		});
  }
  </script>
</body>
</html>